import { getT } from '@/app/i18n'
import { Header } from '../components/Header'

export async function generateMetadata() {
  const { t } = await getT('translation')
  return { title: t('gallery.title') }
}

export default async function GalleryPage() {
  const { t } = await getT('translation')
  
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-black">
      <Header />
      <main className="mx-auto w-full max-w-7xl px-6 py-12">
        {/* Header */}
        <div className="mb-8">
          <h1 className="mb-2 text-4xl font-bold text-gray-900 dark:text-white">
            {t('gallery.title')}
          </h1>
          <p className="text-gray-600 dark:text-gray-400">
            Discover amazing photography from our global community
          </p>
        </div>
        
        {/* Advanced Filters */}
        <div className="mb-8 rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
            {/* Device Filter */}
            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                📷 {t('gallery.filter_by_device')}
              </label>
              <select className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm transition focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
                <option>{t('gallery.all_devices')}</option>
                <option>📷 {t('devices.dslr')}</option>
                <option>📸 {t('devices.mirrorless')}</option>
                <option>🎥 {t('devices.action')}</option>
                <option>📱 {t('devices.smartphone')}</option>
                <option>🚁 {t('devices.drone')}</option>
                <option>🎞️ {t('devices.film')}</option>
              </select>
            </div>
            
            {/* Category Filter */}
            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                🏷️ Category
              </label>
              <select className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm transition focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
                <option>All Categories</option>
                <option>🏔️ Landscape</option>
                <option>👤 Portrait</option>
                <option>🌃 Street</option>
                <option>🐾 Wildlife</option>
                <option>🏛️ Architecture</option>
                <option>🎨 Abstract</option>
              </select>
            </div>
            
            {/* License Filter */}
            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                ⚖️ License Type
              </label>
              <select className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm transition focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
                <option>All Licenses</option>
                <option>CC0 (Public Domain)</option>
                <option>CC BY 4.0</option>
                <option>CC BY-SA 4.0</option>
                <option>CC BY-NC 4.0</option>
              </select>
            </div>
            
            {/* Sort Filter */}
            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                🔄 {t('gallery.sort_by')}
              </label>
              <select className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm transition focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
                <option>⏰ {t('gallery.latest')}</option>
                <option>❤️ {t('gallery.most_liked')}</option>
                <option>👁️ {t('gallery.most_viewed')}</option>
                <option>⬇️ Most Downloaded</option>
              </select>
            </div>
          </div>

          {/* Advanced Options Toggle */}
          <details className="mt-4">
            <summary className="cursor-pointer text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400">
              ⚙️ Advanced Filters
            </summary>
            <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
              <div>
                <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                  ISO Range
                </label>
                <input type="range" min="100" max="6400" className="w-full" />
              </div>
              <div>
                <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                  Aperture
                </label>
                <input type="text" placeholder="e.g., f/1.8" className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800" />
              </div>
              <div>
                <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                  Focal Length
                </label>
                <input type="text" placeholder="e.g., 50mm" className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800" />
              </div>
            </div>
          </details>
        </div>
        
        {/* Results Count */}
        <div className="mb-6 flex items-center justify-between">
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Showing <span className="font-semibold text-gray-900 dark:text-white">1,234</span> results
          </p>
          <div className="flex gap-2">
            <button className="rounded-lg bg-blue-600 p-2 text-white">
              <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
              </svg>
            </button>
            <button className="rounded-lg bg-gray-100 p-2 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
              <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
        
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {/* Photo cards will be rendered here */}
          <p className="col-span-full py-20 text-center text-gray-500 dark:text-gray-400">
            Gallery content loading...
          </p>
        </div>
      </main>
    </div>
  )
}
